<template>
  <div class="container">
    <HfSuperForm v-bind="searchFormProps" ref="searchFormRef" v-on="searchFormEmits" />
    <HfSuperForm v-bind="diologFormProps" ref="diologFormRef" v-on="diologFormEmits"> </HfSuperForm>
    <HfTable v-bind="tableProps" ref="tableRef" v-on="tableEmits"> </HfTable>
  </div>
</template>
<script setup lang="ts">
import { pageEmit } from "@/components/HfSuperForm/super-form";
const searchFormRef = ref<ISusEx>();
let searchFormProps = ref<ISusP>({
  formType: "searchForm",
  formOpt: {
    items: {
      roleName: { type: "input", label: "角色名" }
    }
  }
});
const searchFormEmits: ISusE = {
  emitToOpen: () => pageEmit.emitToOpen({ dioRef: diologFormRef }),
  emitGetListFn: ({ fn }) => pageEmit.emitGetListFn({ tableRef, fn, isPageToOne: true, searchFormRef }),
  emitChangeProps: (objd: ISuECommonChangePropsEmitArgue) => pageEmit.emitChangeProps(objd, searchFormProps.value)
};
const diologFormRef = ref<ISudEx>();
let diologFormProps = ref<ISudP>({
  formType:'drawForm',
  formOpt: {
    saveUrl: "/role",
    items: {
      roleName: { type: "input", label: "角色名", hasrules: true },
      menu: {notHandleArray:true, type: "tree", label: "菜单",defaultExpandAll:true, props:{label:'label'},url:'/menu/list',nodeKey:'value' },
      remark: { type: "textarea", label: "备注" }
    }
  },
  superFormOpt: {width:'600px', title: "新增/编辑角色" }
});
const diologFormEmits: ISudE = {
  emitGetListFn: ({ fn }) => pageEmit.emitGetListFn({ tableRef: tableRef, fn, searchFormRef }),
  emitChangeProps: (objd: ISuECommonChangePropsEmitArgue) => pageEmit.emitChangeProps(objd, diologFormProps.value)
};
const tableRef = ref<ITableEx>();
let tableProps: ITableP = {
  tableOpt: {
    list: { url: "/role" },
    delete: { url: "/role" },
    columns: [
      { label: "角色名", prop: "roleName" },
      { label: "备注", prop: "remark" },
    ]
  }
};
const tableEmits: ITableE = {
  emitToOpen: ({ row }: any) => {
    pageEmit.emitToOpen({ dioRef: diologFormRef, row })
    // nextTick(()=>{
    // })
  }
};
</script>
